<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <link rel="stylesheet" href="./css/bookstore.css">
    <style>
      .color-entry {
          position: relative;
          width: 100%;
          height: 200px; /* 设置高度 */
          background-size: cover;
          background-position: center;
      }

        #bookContainer {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* 让子元素均匀分布，两端对齐 */
        }

        /* 悬浮购物车样式 */
        .floating-cart {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f6f6f6;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 9999; /* 确保图标在最上层 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .floating-cart:hover {
            transform: scale(1.1); /* 悬停时图标放大 */
        }

        .floating-cart img {
            width: 40px;
            height: 40px;
        }


      .overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
          color: white; /* 文字颜色 */
          text-align: center;
      }

      .book-title {
          font-size: 1.2em;
          margin: 0.5em 0;
      }

      .book-author,
      .book-price {
          margin: 0.2em 0;
      }

      /* 夜间模式样式 */
      body.night-mode {
          background-color: black;
          color: white;
      }

    </style>

    <title>西南大学网上书店</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="boomerang-free-bootstrap-ui-kit-master/assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="boomerang-free-bootstrap-ui-kit-master/assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
      <div class="container">
        <span class="navbar-brand">SWU BOOKSTORE</span>
        <a class="navbar-brand" href="/bookstore/user/shopping" style="font-size:20px;border: 1.5px solid transparent; border-image: linear-gradient(to right, lightgray, #288cff) 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);">用户登录</a>
        <!-- 在这里添加一个元素来显示在线人数 -->
        <p id="onlineUsers" style="margin-top:20px">当前在线登录用户人数: 加载中...</p>
        <a class="navbar-brand" href="./admin.html" style="font-size:20px;border: 1.5px solid transparent; border-image: linear-gradient(to right, lightgray, #288cff) 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);">后台管理入口</a>
        <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="col-lg-3 col-md-6">
        <label class="d-block" style="font-size:20px">夜间模式</label>
        <label class="toggle-switch">
          <input type="checkbox" id="nightMode" onchange="nightModeFun()">
          <span class="toggle-switch-slider"></span>
        </label>
      </div>
    </nav>
    <main class="main">
      <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('bookstore/WebRoot/images/library.png')">
        <span class="mask bg-primary alpha-7"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
          <div class="container d-flex align-items-center no-padding">
            <div class="col">
              <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                <div class="col-7">
                  <div class="text-center mt-5">
                    <img src="boomerang-free-bootstrap-ui-kit-master/assets/images/brand/icon.png" style="width: 200px;" class="img-fluid animated" data-animation-in="jackInTheBox" data-animation-delay="1000">
                    <h2 class="heading display-4 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                      <span class="font-weight-700">SWU</span> BOOKSTORE
                    </h2>
                    <p class="lead text-white mt-3 lh-180 c-white animated" data-animation-in="fadeInUp" data-animation-delay="2500">
                      西南大学 网上书店 <strong class="text-white">SWU</strong>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="slice slice-lg">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <!-- Typography -->
              <div class="row typeface-palette cols-xs-space cols-sm-space cols-md-space" style="margin-bottom:50px;">
                <div class="col-sm-4">
                  <a>
                    <div class="typeface-entry" style="background: linear-gradient(to bottom right, #288cff, #00ff99, #ffcc00);">
                      <h3 class="heading display-3 font-weight-400 text-dark">
                        A
                      </h3>
                      <p>
                        <strong>A类</strong>
                      </p>
                    </div>
                  </a>
                </div>
                <div class="col-sm-4">
                  <a>
                    <div class="typeface-entry" style="background: linear-gradient(to bottom right, #288cff, #00ff99, #ffcc00);">
                      <h3 class="heading display-3 font-weight-600 text-dark">
                        B
                      </h3>
                      <p>
                        <strong>B类</strong>
                      </p>
                    </div>
                  </a>
                </div>
                <div class="col-sm-4">
                  <a data-value="'Quicksand', sans-serif">
                    <div class="typeface-entry" style="background: linear-gradient(to bottom right, #288cff, #00ff99, #ffcc00);">
                      <h3 class="heading display-3 font-weight-700 text-dark">
                        C
                      </h3>
                      <p>
                        <strong>C类</strong>
                      </p>
                    </div>
                  </a>
                </div>
              </div>

              <!-- 书籍信息显示 -->
              <div class="row-wrapper" id="bookContainer" ></div>

              <!-- 在bookContainer之前添加分页控制 -->
              <div id="paginationContainer" class="row-wrapper mt-4">
                <button id="prevPage" class="btn btn-primary" onclick="prevPage()">上一页</button>
                <span id="currentPage"></span>
                <button id="nextPage" class="btn btn-primary" onclick="nextPage()">下一页</button>
              </div>

<!--              &lt;!&ndash; Form elements &ndash;&gt;-->
<!--              <div class="row align-items-center mb-4 mt-lg">-->
<!--                <div class="col-8">-->
<!--                </div>-->
<!--              </div>-->
              <div class="row-wrapper" style="margin-top: 100px">
                <h3 class="heading h6 text-uppercase text-primary mt-5 mb-4"><strong>搜索书籍</strong></h3>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                  <div class="col-lg-3 col-md-6">
                    <div class="form-group">
                      <div class="input-group input-group-transparent mb-4">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fas fa-search"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="书名">
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-6">
                    <div class="form-group">
                      <div class="input-group input-group-transparent mb-4">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="作者">
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-6">
                    <div class="form-group">
                      <div class="input-group input-group-transparent mb-4">
                        <input type="text" class="form-control" placeholder="发行日期">
                        <div class="input-group-append">
                          <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-6">
                    <div class="form-group">
                      <div class="input-group input-group-transparent mb-4">
                        <input type="text" class="form-control" placeholder="价格">
                        <div class="input-group-append">
                          <span class="input-group-text"><i class="fas fa-credit-card"></i></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-3 col-md-6" style="padding-right:10px">

                    <button id="searchButton" class="btn btn-primary" onclick="searchBooks()"> <i class="fas fa-search"></i>搜索</button>
                    <button id="showBooksButton" class="btn btn-primary"  style="margin-left:8px" onclick="listBook()">显示所有</button>
                  </div>
                </div>
                <!-- 搜索结果显示区域 -->
                <div id="searchResults" class="row-wrapper mt-4">
                  <!-- 搜索结果动态插入 -->
                </div>

                <h3 class="heading h6 text-uppercase text-primary mt-5 mb-4">书籍筛选</h3>
                <div class="row cols-xs-space cols-sm-space cols-md-space">

                  <div class="col-lg-3 col-md-6">
                    <label class="d-block">显示书籍简介</label>
                    <label class="toggle-switch">
                      <input type="checkbox" checked  id="aboutBookCheckbox" onchange="aboutBookCheckbox()">
                      <span class="toggle-switch-slider"></span>
                    </label>
                  </div>
<!--                  <div class="col-lg-3 col-md-6">-->
<!--                    <label class="d-block">Disabled switch</label>-->
<!--                    <label class="toggle-switch">-->
<!--                      <input type="checkbox" disabled>-->
<!--                      <span class="toggle-switch-slider"></span>-->
<!--                    </label>-->
<!--                  </div>-->
<!--                  <div class="col-lg-3 col-md-6">-->
<!--                    <label class="d-block">Disabled switch</label>-->
<!--                    <label class="toggle-switch">-->
<!--                      <input type="checkbox" disabled checked>-->
<!--                      <span class="toggle-switch-slider"></span>-->
<!--                    </label>-->
<!--                  </div>-->
                </div>

<!--                价格区间搜索的结果展示容器-->
                <div id="searchByPriceRange"></div>

                <h3 class="heading h6 text-uppercase text-primary mt-5 mb-4">选择价格区间</h3>
                <div class="col-lg-3 col-md-6" style="margin-bottom: 20px; margin-left:-15px">
                  <button  id="emptySearchContainer" class="btn btn-primary"  style="color: white;" >取消价格区间</button>
                </div>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                  <div class="col-lg-3 col-md-6">
                    <select class="selectpicker" data-style="btn-primary" title="0到50区间">
                      <option value="0.0,10.0">0.0~10.0</option>
                      <option value="10.0,20.0">10.0~20.0</option>
                      <option value="20.0,30.0">20.0~30.0</option>
                      <option value="30.0,40.0">30.0~40.0</option>
                      <option value="40.0,50.0">40.0~50.0</option>
                    </select>
                  </div>
                  <div class="col-lg-3 col-md-6">
                    <select class="selectpicker" data-style="btn-success" title="50到100区间">
                      <option value="50.0,60.0">50.0~60.0</option>
                      <option value="60.0,70.0">60.0~70.0</option>
                      <option value="70.0,80.0">70.0~80.0</option>
                      <option value="80.0,90.0">80.0~90.0</option>
                      <option value="90.0,100.0">90.0~100.0</option>
                    </select>
                  </div>
                  <div class="col-lg-3 col-md-6">
                    <select class="selectpicker" data-style="btn-danger" title="100到150区间">
                      <option value="100.0,110.0">100.0~110.0</option>
                      <option value="110.0,120.0">110.0~120.0</option>
                      <option value="120.0,130.0">120.0~130.0</option>
                      <option value="130.0,140.0">130.0~140.0</option>
                      <option value="140.0,150.0">140.0~150.0</option>
                    </select>
                  </div>
                  <div class="col-lg-3 col-md-6">
                    <select class="selectpicker" data-style="btn-warning" title="150以上">
                      <option value="150.0,160.0">150.0~160.0</option>
                      <option value="160.0,170.0">160.0~170.0</option>
                      <option value="170.0,180.0">170.0~180.0</option>
                      <option value="180.0,190.0">180.0~190.0</option>
                      <option value="190.0,500.0">190.0以上</option>
                    </select>
                  </div>
                </div>

                <h3 class="heading h6 text-uppercase text-primary mt-5 mb-4">slider</h3>
                <div class="row cols-xs-space cols-sm-space cols-md-space">
                  <div class="col-lg-6">
                    <div class="range-slider-wrapper">
                      <!-- Range slider container -->
                      <div id="input-slider-range" data-range-value-min="0" data-range-value-max="500"></div>
                      <!-- Range slider values -->
                      <div class="row cols-xs-space cols-sm-space cols-md-space">
                        <div class="col-6">
                          <span class="range-slider-value value-low" data-range-value-low="0" id="input-slider-range-value-low"></span>
                        </div>
                        <div class="col-6 text-right">
                          <span class="range-slider-value value-high" data-range-value-high="500" id="input-slider-range-value-high"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>
      <!-- 悬浮购物车图标 -->
      <div class="floating-cart" id="cartIcon">
        <img src="images/cart.jpg" alt="购物车">
      </div>
    </main>
    <footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="pr-lg-5">
              <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>SWU</strong> BOOKSTORE</h1>
              <p>本网站是由计算机与信息科学学院 软件学院本科生开发。本页面是西南大学网上书店面向顾客的前端部分，能展示后端各种图书的信息，并实现部分功能。若想查看后端部分，点击后台管理将重定向到后端部分的页面。</p>
            </div>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">购物指南</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="ShoppingProcess.html">购物流程</a></li>
              <li><a class="text-muted" href="#">会员介绍</a></li>
              <li><a class="text-muted" href="#">常见问题</a></li>
              <li><a class="text-muted" href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">支付方式</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">货到付款</a></li>
              <li><a class="text-muted" href="#">在线支付</a></li>
              <li><a class="text-muted" href="#">分期付款</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">售后服务</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">售后政策</a></li>
              <li><a class="text-muted" href="#">价格保护</a></li>
              <li><a class="text-muted" href="#">退款说明</a></li>
              <li><a class="text-muted" href="#">取消订单</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">关于</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">关于我们</a></li>
              <li><a class="text-muted" href="#">联系我们</a></li>
              <li><a class="text-muted" href="#">隐私政策</a></li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-center">
          <span class="">
            &copy; 2024 <a href="http://172.18.5.102/" class="footer-link" target="_blank">ftp 上传</a>. 计算机与信息科学学院 软件学院
          </span>
          <ul class="nav ml-lg-auto">
            <li class="nav-item">
              <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </footer>
    <!-- Core -->
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/jquery/jquery.min.js"></script>
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/popper/popper.min.js"></script>
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Page plugins -->
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/input-mask/input-mask.min.js"></script>
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/nouislider/js/nouislider.min.js"></script>
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="./boomerang-free-bootstrap-ui-kit-master/assets/js/theme.js"></script>
    <script>
      var booksPerPage = 6;
      var currentPage = 1;
      var totalPages;


      function listBook() {
          fetch('./api/book/list')
              .then(response => response.json())
              .then(data => createBookTable(data))
              .catch(error => console.log(error));
      }

      function createBookTable(json) {
          var books = json["data"];
          // 计算总页数
          totalPages = Math.ceil(books.length / booksPerPage);

          var container = $("#bookContainer");
          container.empty();

          if (books.length === 0) {
              // 如果没数据，添加提示信息
              container.append(`
                  <div style='text-align: center; margin: 0 auto;'>
                      <p style='color: red; font-size: 30px; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px; border-radius: 5px; display: inline-block;'>
                          暂无搜索结果
                      </p>
                  </div>
              `);
          } else {
              // 根据当前页码计算起始和结束索引
              var start = (currentPage - 1) * booksPerPage;
              var end = start + booksPerPage;
              var pageBooks = books.slice(start, end);

              for (var i = 0; i < pageBooks.length; i++) {
                  var book = pageBooks[i];
                  addBookToContainer(container, book);
              }
          }
          updatePagination();
      }

      // 下一页
      function nextPage() {
          if (currentPage < totalPages) {
              currentPage++;
              listBook();
          }
      }

      // 上一页
      function prevPage() {
          if (currentPage > 1) {
              currentPage--;
              listBook();
          }
      }

      function updatePagination() {
          $("#currentPage").text("第 " + currentPage + " 页, 共 " + totalPages + " 页");
          $("#prevPage").prop("disabled", currentPage === 1);
          $("#nextPage").prop("disabled", currentPage === totalPages);
      }



      function addBookToContainer(container, book) {
          container.append(`
              <div class="col-4" style="padding-bottom: 150px;border: 3px solid transparent; border-image: linear-gradient(to right, #ffffff, #000000) 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);padding-top:16px">
                  <a href="user/shopping" style="color: gray" data-toggle="tooltip" title="Primary">
                      <div class="color-entry" style="backgrounder-color: red">
                              <img src="./upload/${book['image']}" alt="" style="max-width: 100%;max-height: 80%;">
                              <h5 class="book-title">${book.name}</h5>
                              <p class="book-author">作者：${book.author}</p>
                              <p class="book-price" style="color: orange">价格:${book.price}元</p>
                              <p class="book-price" style="font-size: smaller; color: lightgray;">${book.memo.substring(0, 65) + (book.memo.length > 65 ? '...' : '')}</p>
                              <p class="book-price">发行日期:${book.publish}</p>
                      </div>
                  </a>
              </div>
          `);
      }

       function disListBookAbout() {
          fetch('./api/book/list')
              .then(response => response.json())
              .then(data => disCreateBookAboutTable(data))
              .catch(error => console.log(error));
      }

      function disCreateBookAboutTable(json) {
          var books = json["data"];
          var container = $("#bookContainer");
          container.empty();
          for (var i = 0; i < books.length; i++) {
              var book = books[i];
              disAddBookAboutToContainer(container, book);
          }
      }

      function disAddBookAboutToContainer(container, book) {
          container.append(`
              <div class="col-4" style="padding-bottom: 150px;border: 3px solid transparent; border-image: linear-gradient(to right, #ffffff, #000000) 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);">
                  <a href="user/shopping" style="color: gray" data-toggle="tooltip" title="Primary">
                      <div class="color-entry" style="backgrounder-color: red">
                              <img src="./upload/${book['image']}" alt="" style="max-width: 100%;max-height: 80%;">
                              <h5 class="book-title">${book.name}</h5>
                              <p class="book-author">作者：${book.author}</p>
                              <p class="book-price" style="color: orange">价格:${book.price}元</p>
                              <p class="book-price">发行日期:${book.publish}</p>
                      </div>
                  </a>
              </div>
          `);
      }

      function listColors() {
          fetch('./api/color/list')
              .then(response => response.json())
              .then(data => updateColorBlocks(data))
              .catch(error => console.log(error));
      }

      function updateColorBlocks(json) {
          var colors = json["data"];
          for (var i = 0; i < colors.length; i++) {
              var colorBlock = $('.color-entry').eq(i);
              colorBlock.css('background-image', 'url(./upload/' + colors[i].image + ')');

              // 更新书名、作者和价格
              colorBlock.find('.book-title').text(colors[i].title);
              colorBlock.find('.book-author').text(colors[i].author);
              colorBlock.find('.book-price').text(colors[i].price);
          }
      }

// 处理点击事件,跳转到购物页面
        document.getElementById('cartIcon').addEventListener('click', function() {
            window.location.href = 'http://localhost:9090/bookstore/user/shopping';
        });

$(document).ready(function() {
    console.log("Document is ready");
    listBook();

    // 插入获取在线用户人数的功能
    function getOnlineUsers() {
        $.ajax({
            url: "/bookstore/user/getOnlineUsers",
            type: "GET",
            success: function(response) {
                if (response && typeof response.activeUsers !== 'undefined') {
                    $("#onlineUsers").text("当前在线登录用户人数: " + response.activeUsers);
                } else {
                    console.error("服务器响应格式不正确:", response);
                }
            },
            error: function(xhr, status, error) {
                console.error("获取在线人数失败:", xhr.status + ' ' + xhr.statusText + ': ' + xhr.responseText);
            }
        });
    }

    // 每30秒刷新一次在线人数
    setInterval(getOnlineUsers, 30000);
    // 首次加载时获取在线人数
    getOnlineUsers();

    // 绑定下拉菜单的change事件
    $('.selectpicker').change(function() {
        console.log("Dropdown changed");
        $(this).data('clicked', true); // 当下拉菜单被改变时，设置clicked为true
        if ($(this).data('clicked')) {
            searchByPriceRange(); // 只有在clicked为true时才调用
        }
    });

    // 绑定取消价格区间按钮的click事件
    $('#emptySearchContainer').click(function() {
        console.log("Cancel price range button clicked");

        // 清空指定的容器
        let container = $("#searchByPriceRange");
        container.empty(); // 清空容器内容

        // 恢复下拉菜单到默认状态
        $('.selectpicker').each(function() {
            $(this).val(''); // 设置为默认值
            $(this).selectpicker('refresh'); // 刷新下拉菜单以反映更改
        });

        // 重置clicked为false
        $('.selectpicker').data('clicked', false);
    });
});

function searchByPriceRange() {
    console.log("searchByPriceRange function called");
    let minPrice = null;
    let maxPrice = null;

    $('.selectpicker').each(function() {
        if ($(this).data('clicked') === true) {
            let selectedOptionValue = $(this).find('option:selected').val();
            console.log("Selected Option Value: ", selectedOptionValue);

            if (selectedOptionValue.includes('以上')) {
                let min = parseFloat(selectedOptionValue.split(',')[0]);
                minPrice = min;
                maxPrice = 500.0; // 确保这里也是浮点数
            } else {
                let [min, max] = selectedOptionValue.split(',').map(parseFloat);
                minPrice = min;
                maxPrice = max;
            }
            console.log("Current Min Price: ", minPrice);
            console.log("Current Max Price: ", maxPrice);
        }
    });

    console.log("Final Min Price: ", minPrice);
    console.log("Final Max Price: ", maxPrice);

    if (minPrice !== null && maxPrice !== null) {
        fetch('./api/book/searchByPriceRange', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ min: minPrice, max: maxPrice })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log("Search Response Data:", data);
            createPriceRangeBookTable(data.data);
        })
        .catch(error => {
            console.log("Search Error:", error);
        });
    }
}


  // 创建价格区间搜索结果表格
  function createPriceRangeBookTable(books) {
      let container = $("#searchByPriceRange");
      container.empty();

      if (books.length === 0) {
          container.append("<p>没有找到相关书籍</p>");
          return;
      }

      let table = $("<table>").addClass("table table-striped");
      let thead = $("<thead>").html("<tr><th>书名</th><th>作者</th><th>价格</th><th>发布日期</th></tr>");
      table.append(thead);

      let tbody = $("<tbody>");
      for (let book of books) {
          let row = $("<tr>");
          row.append(`<td>${book.name}</td>`);
          row.append(`<td>${book.author}</td>`);
          row.append(`<td>${book.price}</td>`);
          row.append(`<td>${book.publish}</td>`);
          tbody.append(row);
      }
      table.append(tbody);
      container.append(table);
  }

    function searchBooks() {
      let searchTerm = '';
      let searchBy = '';

      // 检查用户输入,只选择第一个非空的输入
      if ($('input[placeholder="书名"]').val() !== '') {
          searchTerm = $('input[placeholder="书名"]').val();
          searchBy = 'name';
      } else if ($('input[placeholder="作者"]').val() !== '') {
          searchTerm = $('input[placeholder="作者"]').val();
          searchBy = 'author';
      } else if ($('input[placeholder="发行日期"]').val() !== '') {
          searchTerm = $('input[placeholder="发行日期"]').val();
          searchBy = 'publish';
      } else if ($('input[placeholder="价格"]').val() !== '') {
          searchTerm = $('input[placeholder="价格"]').val();
          searchBy = 'price';
      }

      if (searchTerm !== '') {
          fetch('./api/book/search', {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
              },
              body: JSON.stringify({ [searchBy]: searchTerm })
          })
          .then(response => response.json())
          .then(data => createBookTable(data))
          .catch(error => console.log(error));
      } else {
          alert('请至少填写一个搜索条件');
      }
    }

    function aboutBookCheckbox(){
      var checkbox = document.getElementById("aboutBookCheckbox");
      if (checkbox.checked) {
        listBook();
        //alert("显示书籍简介");
      }
      else {
        disListBookAbout();
        //alert("不显示书籍简介");
      }
    }

    function nightModeFun() {
        var checkbox = document.getElementById("nightMode");
        if (checkbox.checked) {
            document.body.classList.add("night-mode"); // 添加夜间模式
        } else {
            document.body.classList.remove("night-mode"); // 移除夜间模式
        }
    }

    </script>
  </body>
</html>
